<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" title="编辑信息" height="46" title-color="#333" :title-bold="true"
		 :title-size="36">
		</u-navbar>
		<view class="">
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label-position="left" label="头像" prop="photo" label-width="150" class="photo_img">
					<view class="resume_img">
						<img-upload @chooseImage="chooseImage" @delImg="delImg" :count="count" v-if="imgshow">
						</img-upload>
						<image @click="Imageshow" :src="form.img" mode="heightFix" v-if="!imgshow"></image>
					</view>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="姓名" prop="name" class="name-box" :label-style="labelStyle">
					<u-input placeholder="如:刘媛媛" v-model="form.name" type="text" :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item label-width="150" :label-position="labelPosition" label="日历" prop="calendar" class="name-box"
				 right-icon="arrow-right" :label-style="labelStyle">
					<u-input placeholder="请选择出生日期" v-model="form.calendar" type="text" @click="show = true" :custom-style="{fontSize: '30rpx',}"
					 :height="30" :disabled="true"></u-input>
					<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="性别" prop="sex" class="name-box" :label-style="labelStyle"
				 right-icon="arrow-right">
					<u-input type="select" :select-open="actionSheetShow" v-model="form.sex" placeholder="请选择性别" @click="actionSheetShow = true"
					 :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="电话" prop="phone" label-width="150" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="如：138-8888-8888" v-model="form.phone" type="number" :custom-style="{fontSize: '30rpx',}"
					 :height="30"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="邮箱" prop="email" label-width="150" class="name-box"
				 :label-style="labelStyle">
					<u-input placeholder="如：13888888888@qq.com" v-model="form.email" type="text" :custom-style="{fontSize: '30rpx',}"
					 :height="30"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="所在城市" prop="region" label-width="150" class="name-box"
				 :label-style="labelStyle" right-icon="arrow-right">
					<u-input type="select" :select-open="pickerShow" v-model="form.region" placeholder="请选择所在城市" @click="pickerShow = true"
					 :custom-style="{fontSize: '30rpx',}" :height="30"></u-input>
				</u-form-item>
			</u-form>
			<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<view class="more_info">
				<!-- <u-icon name="plus" color="#fff" size="28" style="margin-right: 15rpx;"></u-icon>更多信息 -->
				<u-button @click="submit" shape="circle" ripple-bg-color="rgba(0, 192, 145, 0.32)" style="background-color: #18B566;color: #fff;">保存</u-button>
			</view>
			<u-toast ref="uToast" />

		</view>
	</view>
</template>

<script>
	import ImgUpload from "@/components/common/img-upload.vue"
	export default {
		components: {
			ImgUpload
		},
		data() {
			return {
				dkdtp: [],
				count: 1,
				show: false,
				popupshow: false,
				imgshow: false,
				mode: 'date',
				form: {
					name: "",
					calendar: "",
					sex: "",
					phone: "",
					region: "",
					email: "",
					img: "",
					id: "",
				},
				labelStyle: {
					height: "36rpx",
					fontSize: "24rpx",
					color: "#666666",
				},
				errorType: ['message'],
				labelPosition: "top",
				actionSheetShow: false,
				pickerShow: false,
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 5,
							message: '姓名长度在2到5个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.email(value);
							},
							message: '邮箱不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				},
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
				],
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.resumemy(options.id)
		},
		methods: {
			change(e) {
				this.form.calendar = e.result
			},
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.form.sex = this.actionSheetList[index].text;
			},
			regionConfirm(e) {
				this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit() {
				this.popupshow = false
				let $t = this
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						let params = {
							ak: this.$store.state.token,
							cmd: 'lPeople_myupdate',
							para: {
								"id": this.form.id,
								"xm": this.form.name,
								"xb": this.form.sex,
								"lxdh": this.form.phone,
								"csrq": this.form.calendar,
								"zz": this.form.region,
								"tx": this.form.img
							}
						}
						const res = await this.$u.api.resumexgdata(params)
						if (res.ResponseID == 0) {
							this.$refs.uToast.show({
								title: res.Message,
								icon: false,
								duration: 800,
								callback() {
									uni.$emit('refreshData');
									uni.navigateBack({
										delta: 1
									})
								}
							})

						}
					}
				});
			},
			Imageshow(){
				this.imgshow=true
			},
			chooseImage(arr) {
				this.dkdtp = arr[0].lj
				console.log(this.dkdtp)
			},
			// 删除图片
			delImg(arr) {
				this.dkdtp = arr
			},
			async resumemy(id) {
				let _this = this
				let params = {
					ak: this.$store.state.token,
					cmd: 'lPeople_myquery',
					para: {
						"id": id,
					}
				}
				const res = await this.$u.api.resumedata(params)
				// console.log(res.Data)
				this.form.name = res.Data.xm
				this.form.calendar = this.$u.timeFormat(res.Data.csrq, 'yyyy-mm-dd');
				this.form.sex = res.Data.xb
				this.form.phone = res.Data.lxdh
				this.form.region = res.Data.zz
				if (res.Data.tx.indexOf('http') == -1) {
					this.form.img = this.baseUrl + res.Data.tx
				} else { 
					this.form.img = res.Data.tx
				}
				this.form.id = res.Data.id
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .cu-form-group .grid-square .solids,
	/deep/ .cu-form-group .grid-square .bg-img uni-image,
	/deep/.cu-form-group .grid-square .bg-img {
		width: 125rpx;
		height: 160rpx;
	}

	.resume_img {
		width: 125rpx;
		height: 160rpx;
		border-radius: 20rpx;
		overflow: hidden;

		image {
			height: 100%;
		}
	}

	.name-box,
	.photo_img {
		padding: 30rpx 30rpx;
	}

	.more_info {
		margin: 30rpx auto;
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #00C091;
		color: #fff;
		font-size: 30rpx;

		/deep/.uicon-plus {
			border-radius: 50%;
			border: 2rpx solid #fff;

		}
	}

	/deep/ .u-input__right-icon {
		display: none;
	}

	.photo_img {
		/deep/.u-form-item--left__content__label {
			flex-direction: column;
			align-items: flex-start;
			flex: 1;
			font-size: 48rpx;
			font-weight: bold;

			&::after {
				content: "上传真实头像更容易获得好感~~";
				font-size: 24rpx;
				color: #00C091;
				font-weight: normal;
			}
		}

		/deep/.u-form-item--right {
			flex: 0;
		}

		/deep/.u-form-item__body {
			justify-content: space-between
		}

		/deep/.u-form-item--left {
			flex: 1 !important;
			width: 100% !important;
		}
	}

	.popup_box {
		/deep/.u-mode-center-box {
			border-radius: 30rpx;
		}

		.content {
			padding: 60rpx 40rpx;
			width: 92vw;

			.content-text {
				margin-bottom: 60rpx;
				font-size: 36rpx;
				color: #000000;
				font-weight: bold;
			}

			.content-label {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 30rpx;
			}

			.content-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.content-list_box {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-bottom: 34rpx;
					width: 180rpx;
					height: 180rpx;
					background: #F8F8FA;
					border-radius: 10rpx;

					image {
						height: 60rpx;
						width: 60rpx;
					}

					.content_list_text {
						font-size: 24rpx;
						color: #333333;
						margin: 15rpx 0 10rpx 0;
					}

					.content_list_plus {
						width: 70rpx;
						height: 40rpx;
						background: #88E9D1;
						border-radius: 20rpx;
						line-height: 40rpx;
						text-align: center;

						/deep/.uicon-plus {
							border-radius: 50%;
							border: 2rpx solid #fff;
						}
					}
				}
			}

			.content_save {
				margin: 30rpx auto;
				width: 200rpx;

				/deep/.u-btn--default {
					background: #00C091;
					box-shadow: 0rpx 3rpx 32rpx 0rpx rgba(0, 192, 145, 0.32);
					color: #fff;
					border: none;
				}
			}
		}
	}
</style>
